<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <script src="/javascripts/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/stylesheets/index.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=04c74692ab855ee7b42089d793d42b2d"></script>
    <style type="text/css">
        #container {width:700px; height: 380px; }
    </style>
    <script src="/javascripts/jquery.autocomplete.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
        .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
        .autocomplete-selected { background: #F0F0F0; }
        .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
        .autocomplete-group { padding: 2px 5px; }
        .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
    </style>
</head>
<body>
<!-------------地图------------------->
<div class="mod-mapLayer" style="display: none;">
    <div class="mapLayer">
        <div class="mapTop clearfix">
            <h2>地图模式</h2>
            <button>X</button>
        </div>
        <div class="mapContent">
            <div id="container"></div>
        </div>
    </div>
</div>
<div class="mod-container">
    <div class="mod-topbarThrough">
        <div class="mod-topbar clearfix">
            <ul class="topLeft">
                <li>
                    <span>北京</span>
                    [切换城市]
                </li>
                <li>同城首页</li>
            </ul>
            <ul class="topRight">
                <li><a>登录</a></li>
                <li><a>注册</a></li>
                <li><a>我的订单</a></li>
                <li><a>客服电话:4000-399-360</a></li>
                <li><a>客户服务</a></li>
                <li><span>投诉建议</span></li>
            </ul>
        </div>
    </div>

    <div class="bannerThrough">
        <div class="mod-menu clearfix">
            <ul>
                <li><a>二手良品</a>
                    <img src="/images/3.jpg" />
                </li>
                <li><a>手机回收</a></li>
                <li><a>手机维修</a></li>
                <li><a href="/repair">电脑维修</a></li>
                <li><a>以旧换新</a></li>
                <li><a>手机试用</a></li>
            </ul>
        </div>
        <div class="banner clearfix">
            <div class="nav">
                <ul>
                    <li>修手机/Pad<div class="arrow"></div></li>
                    <li>修电脑<div class="arrow"></div></li>
                    <li>买手机<div class="arrow"></div></li>
                    <li>买二手机<div class="arrow"></div></li>
                </ul>
            </div>
            <div class="navSelect clearfix">
                <div class="hotProblem clearfix">
                    <p>热门问题：</p>
                    <ul>
                        <li>系统重装</li>
                        <li>系统重装</li>
                        <li>系统重装</li>
                        <li>系统重装</li>
                        <li>系统重装</li>
                        <li>系统重装</li>
                    </ul>
                </div>
                <div class="elseProblem clearfix">
                    <p>其他问题：</p>
                    <ul>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                        <li>开机加速</li>
                    </ul>
                </div>
            </div>
            <div class="slider">
                <div class="roll">
                    <img src="/images/banner1.jpg" />
                    <img src="/images/banner2.gif" />
                    <img src="/images/banner3.png" />
                    <img src="/images/banner4.jpg" />
                    <img src="/images/banner5.jpg" />
                </div>
            </div>
            <div class="sliderButton">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="mod-content">
        <div class="hot clearfix">
            <ul>
                <li>
                    <h2>手机换屏</h2>
                    <p>上门服务 180天质保</p>
                    <!--<img src="/images/hot1.jpg" />-->
                </li>
                <li>
                    <h2>手机换屏</h2>
                    <p>上门服务 180天质保</p>
                    <!--<img src="/images/hot1.jpg" />-->
                </li>
                <li>
                    <h2>手机换屏</h2>
                    <p>上门服务 180天质保</p>
                    <!--<img src="/images/hot1.jpg" />-->
                </li>
                <li>
                    <h2>手机换屏</h2>
                    <p>上门服务 180天质保</p>
                    <!--<img src="/images/hot1.jpg" />-->
                </li>
            </ul>
        </div>
        <div class="recover clearfix">
            <div class="recoverTop">
                <h2>热门手机回收</h2>
                <img src="/images/arrow1.jpg"/>
                <p>查看更多</p>
            </div>
            <ul>
                <li></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
            </ul>
        </div>

        <div class="secondHand clearfix">
            <div class="secondHandTop">
                <h2>二手良品精选</h2>
                <img src="/images/arrow1.jpg"/>
                <p>查看更多</p>
            </div>
            <ul>
                <li></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
                <li><p>苹果iphone 6</p></li>
            </ul>
        </div>
        <p class="fix">到店维修</p>

    </div>

    <div class="repairThrough">
        <div class="repair clearfix">
            <div class="search clearfix">
                <div class="province"><p>北京</p></div>
                <div class="city"><p>选择区县</p></div>
                <input type="text" id="searching" placeholder="输入您的位置查找附近的商家" />
                <input type="button" id="submit" value="搜索" />
            </div>
            <div class="shopRankLeft">
                <div class="shopRankSelect clearfix">
                    <ul>
                        <li><p>默认排序</p></li>
                        <li><p>按成交量</p></li>
                        <li><p>按人气</p></li>
                        <li>
                            <input type="checkbox" name="checkbox" id="checkbox" value="" />先行赔付
                            <div class="map">地图模式</div>
                        </li>
                    </ul>
                </div>
                <div class="shopRank">
                    <ul id="list">
                    </ul>
                </div>
                <div class="pageTurn">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>下一页</li>
                    </ul>
                </div>
            </div>


            <div class="commentRank">
                <p>商家好评榜</p>
                <ul>
                    <li>
                        <figure>
                            <img src="/images/rank1.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank2.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank3.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank4.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank4.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank4.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="/images/rank4.jpg"/>
                            <img src="/images/shop1.jpg"/>
                            <figcaption>
                                <a>顺通电脑维修</a>
                                <p>12343条评论</p>
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footerThrough">
        <div class="footer">
            <div class="behind clearfix">
                <ul>
                    <li>
                        <p>购物指南</p>
                        <a>购物流程</a>
                        <a>购物流程</a>
                        <a>购物流程</a>
                    </li>
                    <li>
                        <p>购物指南</p>
                        <a>购物流程</a>
                        <a>购物流程</a>

                    </li>
                    <li>
                        <p>购物指南</p>
                        <a>购物流程</a>

                    </li>
                    <li>
                        <p>购物指南</p>
                        <a>购物流程</a>

                    </li>
                    <li>
                        <p>购物指南</p>
                        <a>购物流程</a>

                    </li>
                </ul>
            </div>
            <div class="address">
                <p>客服电弧124313241&nbsp;&nbsp;<span>阿斯蒂芬</span>&nbsp;&nbsp;<span>去玩儿若</span></p>
                <p>sfeqfqfs fe!@ #s12345245 3425245 adfas df23$% 离开的</p>
                <p>萨科合法sadffa看的哈斯sadfadf卡积分换</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/javascripts/home.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var li = document.getElementsByClassName('nav')[0].getElementsByTagName('li');
    var navSelect = document.getElementsByClassName('navSelect')[0];
    for(var i=0;i<li.length;i++){
        li[i].onmouseover =function(){
            navSelect.style.display = "block";
        }
        li[i].onmouseout =function(){
            navSelect.style.display = "none";
        }
    }
    navSelect.onmouseover =function(){
        this.style.display = "block";
    }
    navSelect.onmouseout =function(){
        this.style.display = "none";
    }


</script>
</html>






























